<div id="pan">
	<?php echo $html->link(__('Home',true), '/'); ?> &gt; 
	<?php echo $html->link(__('Article',true), '/articles'); ?> &gt; 
	<strong><?php echo __('New Article',true); ?></strong>
</div>

<h2><?php echo __('New Article',true); ?></h2>
<?php echo $form->create('Article',array('action' => 'add','dojoType'=>'dijit.form.Form'));?>
<div id="article_tabs" dojoType="dijit.layout.TabContainer" doLayout="false">
	<div dojoType="dijit.layout.ContentPane" title="<?php echo __('Main',true); ?>">
		<?php echo $form->hidden('user_id',array('value'=>$auth['User']['id'])); ?>
		<?php echo $form->hidden('Mml.user_id',array('value'=>$auth['User']['id'])); ?>
		<dl>
			<dt><?php echo __('Title',true); ?></dt>
			<dd><?php echo $form->text('title',array(
					'dojoType'=>'dijit.form.ValidationTextBox',
					'required'=>'true',
					'invalidMessage'=>__('Title is empty.',true)
				)); ?><span dojoType="dijit.Tooltip" connectId="ArticleTitle"><?php echo __('Please put in the music name of MML.',true); ?></span>
			</dd>
			<dt><?php echo __('Message',true); ?></dt>
			<dd><div id="Editor" dojoType="dijit.Editor" plugins="['undo','redo','|','cut','copy','paste','|','bold','italic','underline','strikethrough','createLink',{name:'dijit._editor.plugins.EnterKeyHandling'},'|','foreColor','hiliteColor','|','justifyLeft','justifyCenter','justifyRight']" styleSheets="/css/editor.css"></div>
				<?php echo $form->hidden('body'); ?>
				<span dojoType="dijit.Tooltip" connectId="Editor"><?php echo __('Please input your comment about this work.',true); ?><br /><?php echo __('When you starting a new line a new line, please press the return key, pressing the Shift key.',true); ?></span>
			</dd>
		</dl>
	</div>
	<div dojoType="dijit.layout.ContentPane" title="<?php echo __('MML',true); ?>">
		<div dojoType="dijit.Toolbar" class="title_toolbar">
			<button dojoType="dijit.form.Button" iconclass="LoreleiIcon LoreleiIconPlay" id="MmlPlay"><?php echo __('Play',true) ?></button>
			<button dojoType="dijit.form.Button" id="MmlStop" iconclass="LoreleiIcon LoreleiIconPlayerStop"><?php echo __('Stop',true) ?></button>
			<!--input type="radio" name="PlayType" value="midi" id="midi" dojoType="dijit.form.RadioButton" checked="checked" /><label for="midi">MIDI</label>
			<input type="radio" name="PlayType" value="jsmml" id="jsmml" dojoType="dijit.form.RadioButton" /><label for="jsmml">JSMML</label-->
			<button dojoType="dijit.form.Button" id="Clear" iconclass="LoreleiIcon LoreleiIconClear"><?php echo __('Clear',true) ?></button>
			<div dojoType="dijit.form.DropDownButton" iconclass="LoreleiIcon LoreleiIconMmlPaste">
				<span><?php echo __('Copy from Clipboard',true) ?></span>
				<div dojoType="dijit.TooltipDialog" id="Paste">
					<textarea name="mml" id="Mml" dojoType="dijit.form.SimpleTextarea" style="width:512px;height:48px;"></textarea>
					<p>
						<?php echo __('Please input the text of the MML form of Mabinogi into this form.',true);?> (MML@<i>[ch1]</i>,<i>[ch2],</i>,<i>[ch3]</i>;)<br />
						<?php echo __('If a lower paste button is pushed, it will divide into MML for every channel automatically.',true); ?>
					</p>
					<button id="MmlPaste" dojoType="dijit.form.Button"><?php echo __('Paste',true) ?></button>
					<button id="MmlClear" dojoType="dijit.form.Button"><?php echo __('Clear',true) ?></button>
				</div>
			</div>
			<button id="Copy" dojoType="dijit.form.Button" iconclass="LoreleiIcon LoreleiIconMmlCopy"><?php echo __('Copy to Clipboard',true) ?></button>
		</div>
		<dl>
			<dt><?php echo __('Track Name'); ?></th>
			<dd><?php echo $form->text('Mml.name',array(null,'dojoType'=>'dijit.form.TextBox',));?><span id="media"></span></dd>
			<dt><?php echo __('Instrument'); ?></dt>
			<dd><?php echo $form->select('Mml.instrument_id',
					array($instruments),0,
					array(
						'dojoType'=>'dijit.form.FilteringSelect',
						'autocomplete'=>'false',
						'ignoreCase'=>'false',
						'hasDownAllow'=>'true',
						'style'=>'width:140px',
						'id'=>'instrument',
					),
				false); ?>
				<input type="button" id="tone_checker" class="icon" />
			</dd>
			<dt><?php echo __('Panpod'); ?></dt>
			<dd><?php echo $form->text('Mml.pan',
				array(
					'dojoType'=>'dijit.form.TextBox',
					'value'=>64,
					'size'=>3,
					'style'=>'width:32px;ime-mode:disabled',
					'onChange'=>"dijit.byId('pan_slider').value = this.value",
					'disabled'=>'disabled'
				)
			); ?>
				<div dojoType="dijit.form.HorizontalSlider"
					onChange="document.getElementById('MmlPan').value=(arguments[0]|0);"
					value="64"
					maximum="128"
					minimum="0"
					discreteValues="9"
					intermediateChanges="true"
					style="height: 20px;width:95%;"
					id="pan_slider"
				>
					<div dojoType="dijit.form.HorizontalRule" container="bottomDecoration" count=9 style="height:3px;"></div>
					<div dojoType="dijit.form.HorizontalRule" container="bottomDecoration" count="9" style="height:6px;"></div>
					<ol dojoType="dijit.form.HorizontalRuleLabels" container="bottomDecoration" style="height:1em;font-size:9px;color:gray;">
						<li><?php echo __('Left',false); ?></li>
						<li><?php echo __('Center',false); ?></li>
						<li><?php echo __('Right',false); ?></li>
					</ol>
				</div>
			</dd>
			<dt><?php echo __('Rank',true); ?></dt>
			<dd><?php echo $form->select('Mml.rank',
					array($ranks),1,
					array(
						'dojoType'=>'dijit.form.FilteringSelect',
						'autocomplete'=>'false',
						'ignoreCase'=>'false',
						'hasDownAllow'=>'true',
						'style'=>'width:48px',
						'id'=>'rank_id'
					),
				false); ?>
				<?php echo $form->hidden('Mml.rank_id'); ?>
				<?php echo $form->hidden('Article.rank_id'); ?>
			</dd>
			<dt><?php echo __('MML'); ?></th>
			<dd>
				<div id="composer-display">
					<div class="composer-display-item">
						<div class="composer-display-radio">
							<input type="radio" name="Track" id="ch1_radio" dojoType="dijit.form.RadioButton" value="ch1" checked="checked" />
							<label for="ch1_radio"><?php echo __('Melody',true); ?></label>
						</div>
						<div class="composer-display-length">
							<label for="ch1_length"><?php echo __('Length',true); ?></label>
							<input name="ch1_length" id="ch1_length" disabled="disabled" type="text" value="0" dojoType="dijit.form.TextBox" />
						</div>
						<?php echo $form->textarea('Mml.ch1',array(
							'dojoType'=>'dijit.form.SimpleTextarea',
							'class'=>'mml',
							'warp'=>'soft',
							'id'=>'ch1'
						));?>
					</div>
					<div class="composer-display-item">
						<div class="composer-display-radio">
							<input type="radio" name="Track" id="ch2_radio" dojoType="dijit.form.RadioButton" value="ch2" />
							<label for="ch2_radio"><?php echo __('Chord 1',true); ?></label>
						</div>
						<div class="composer-display-length">
							<label for="ch2_length"><?php echo __('Length',true); ?></label>
							<input name="ch2_length" id="ch2_length" disabled="disabled" type="text" value="0" dojoType="dijit.form.TextBox" />
						</div>
						<?php echo $form->textarea('Mml.ch2',array(
							'dojoType'=>'dijit.form.SimpleTextarea',
							'class'=>'mml',
							'warp'=>'soft',
							'id'=>'ch2'
						));?>
					</div>
					<div class="composer-display-item">
						<div class="composer-display-radio">
							<input type="radio" name="Track" id="ch3_radio" dojoType="dijit.form.RadioButton" value="ch3" />
							<label for="ch3_radio"><?php echo __('Chord 2',true); ?></label>
						</div>
						<div class="composer-display-length">
							<label for="ch3_length"><?php echo __('Length',true); ?></label>
							<input name="ch3_length" id="ch3_length" disabled="disabled" type="text" value="0" dojoType="dijit.form.TextBox" />
						</div>
						<?php echo $form->textarea('Mml.ch3',array(
							'dojoType'=>'dijit.form.SimpleTextarea',
							'class'=>'mml',
							'warp'=>'soft',
							'id'=>'ch3'
						));?>
					</div>
				</div>
				<br style="clear:both;" />
			</dd>
		</dl>
	</div>
	<div dojoType="dijit.layout.ContentPane" title="<?php echo __('Option',true); ?>">
		<dl>
			<dt><?php echo __('Page Name',true); ?></dt>
			<dd><?php echo $form->text('page_name',array(
					'dojoType'=>'dijit.form.ValidationTextBox',
					'RegExp'=>'[ -~]{4,64}',
					'maxlength'=>'64',
					'invalidMessage'=>__('The character which can be used is only an alphanumeric character.',true),
					'style'=>'ime-mode:disabled;'
				)); ?><span dojoType="dijit.Tooltip" connectId="ArticlePageName"><?php echo __('Here, the file name of a page is put in.',true); ?><br /><?php echo __('Not required.',true); ?></span>
			</dd>
			<dt><?php echo __('Source',true); ?></dt>
			<dd><?php echo $form->text('source',array(
					'dojoType'=>'dijit.form.TextBox',
					'maxlength'=>'128',
				)); ?><span dojoType="dijit.Tooltip" connectId="ArticleSource"><?php echo __('Please fill in the source origin of this MML (a composer name, a work name, etc.).',true); ?><br /><?php echo __('Not required.',true); ?></span>
			</dd>
			<dt><?php echo __('Tags',true); ?></dt>
			<dd><?php
				echo $form->text('tags',array(
					'dojoType'=>'dijit.form.TextBox',
					'required'=>'true',
					'style'=>'width:360px;'
				));
			?><span dojoType="dijit.Tooltip" connectId="ArticleTags"><?php echo __('Multiple tags have to be seperated with commas.',true); ?><br /><?php echo __('Not required.',true); ?></span>
			</dd>
			<dt><?php echo __('Lyrics',true); ?></dt>
			<dd><?php echo $form->textarea('lyrics',array(
					'dojoType'=>'dijit.form.Textarea',
					'style'=>'width:512px;',
				));
			?></dd><span dojoType="dijit.Tooltip" connectId="ArticleLyrics"><?php echo __('Please input, if there are the lyrics etc.',true); ?><br /><?php echo __('Not required.',true); ?></span>
		</dl>
	</div>
</div>
<div class="action">
	<button type="submit" dojoType="dijit.form.Button" iconclass="LoreleiIcon LoreleiIconOk"><?php echo __('Submit',true) ?></button>
	<button type="reset" dojoType="dijit.form.Button" iconclass="LoreleiIcon LoreleiIconReset"><?php echo __('Reset',true) ?></button>&nbsp;
	<button id="cancel" dojoType="dijit.form.Button" iconclass="LoreleiIcon LoreleiIconCancel"><?php echo __('Cancel',true) ?></button>
</div>
<?php echo $form->end();?>

<?php $this->addScript($javascript->codeBlock('
dojo.require("dojo.parser");
dojo.require("dojo.back");
dojo.require("dijit.Editor");
dojo.require("dijit.Dialog");
dojo.require("dijit.Menu");
dojo.require("dijit.Toolbar");
dojo.require("dijit.form.Button");
dojo.require("dijit.form.CheckBox");
dojo.require("dijit.form.FilteringSelect");
dojo.require("dijit.form.Form");
dojo.require("dijit.form.SimpleTextarea");
dojo.require("dijit.form.Slider");
dojo.require("dijit.form.TextBox");
dojo.require("dijit.form.Textarea");
dojo.require("dijit.form.ValidationTextBox");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.TabContainer");
dojo.require("lorelei.articles");
dojo.require("lorelei.mml.checker");

message = 
	{"clipboard":"'.__('Copying to clipboard by Mabinogi MML format.',true).'\n'.__('Note: Clipboard will be overwritten.',true).'\n\n'.__('Please use with the common sense.',true).'"};

lorelei.articles.form(\'ArticleAddForm\');
',array('inline' => false))); ?>